<template>
	<view>
		<view class="confirm-order">
			<view v-if="agentInfo.leixin!=3" class="column-center bg-white" style="padding: 0 20rpx 20rpx;">
				<u-subsection class="mt20" style="width: 50%;" bg-color="#f6f6f6" button-color="var(--primary-color)"
					active-color="#fff" v-if="shippint_type" :list="shippint_type" :current="curr_shipping_type"
					@change="e=>curr_shipping_type=e"></u-subsection>
				<u-notice-bar :show="curr_shipping_type_id!=2" class="mt20" style="width: 100%;" type="error"
					:border-radius="10" :list="[logisticsText]"></u-notice-bar>
			</view>

			<!-- 地址 -->
			<navigator v-if="curr_shipping_type_id != 2" hover-class="none"
				url="/package_user/pages/user_address/index?type=1">
				<address-item :address="address" />
			</navigator>


			<view class="confirm-con">
				<!-- 商品信息 -->
				<view class="goods contain">
					<view class="lease-goods">
						<lease-order-goods :image="goods.image">
							<template #name>{{ goods.goods_name }}</template>
							<template #specs>
								{{ goods.spec_value_str }}，
								{{ orderInfo.tenancy }}
							</template>
							<template #price>
								<price :content="oneDayPrice" mainSize="38rpx" minorSize="24rpx" color="#FF2C3C"
									:isPrefix="true" :isSuffix="true" />
								<text>（x{{ orderInfo.tenancy }}）</text>
							</template>
						</lease-order-goods>
					</view>

					<view v-if="agentInfo.leixin == 3" class="item row-between">
						<view>配送方式</view>
						<view>快递</view>
					</view>
					<view class="item row-between">
						<view>买家留言</view>
						<u-input v-model="userRemark" class="flex1 ml20" :clearable="false"
							placeholder="请添加备注（150字以内）" />
					</view>
				</view>

				<!-- 分期费用明细 -->
				<view class="periods-price contain">
					<view class="periods-price-item">
						<view class="lighter periods-price-row row-between" v-if="orderInfo.total_amount>0">
							<view>总租金</view>
							<view>
								¥{{ currCoupon&&orderInfo.type_status==1? orderInfo.total_amount-Number(currCoupon.amount):orderInfo.total_amount }}
							</view>
						</view>
						<view class="lighter periods-price-row row-between">
							<view>租期</view>
							<view>{{ orderInfo.tenancy }}</view>
						</view>
						<view class="lighter periods-price-row row-between">
							<view>押金</view>
							<view>¥{{ goods.deposit }}</view>
						</view>
						<view class="lighter periods-price-row row-between" v-if="curr_shipping_type_id == 3">
							<view>配送费</view>
							<view>¥{{orderInfo.shipping_price}}</view>
						</view>
					</view>
				</view>

				<!-- 舍去 -->
				<view class="periods-price contain" v-if="false">
					<view class="periods-price-item">
						<view>
							<view class="lighter periods-price-row row-between">
								<view>首期租赁金额</view>
								<view>¥{{ goods.issue_rent }}</view>
							</view>
							<template v-if="orderInfo.insurance !== null">
								<view class="lighter periods-price-row row-between">
									<view>保险套餐</view>
									<view>+¥{{ orderInfo.insurance || '0.00' }}</view>
								</view>
							</template>
							<view class="lighter periods-price-row row-between">
								<view>保证金</view>
								<view>+¥{{ goods.deposit }}</view>
							</view>
						</view>

						<view class="row-between periods-price-title">
							<view class="ornament">应付金额</view>
							<view class="ornament">¥{{ goods.first_pay_amount }}</view>
						</view>
					</view>
				</view>


				<!-- 配送门店 -->
				<view class="send-store mt20 bg-white" style="border-radius: 24rpx;">
					<view class="top-bar">
						<view class="title">配送门店</view>
					</view>
					<view class="store-info">
						<view class="goods-img">
							<image :src="agentInfo.image" mode="aspectFill" class="img"></image>
						</view>
						<view class="info-box">
							<text class="address">{{agentInfo.address}}</text>
							<view class="row">
								<view class="distance" @click="openMap(agentInfo.lat,agentInfo.lng)">
									<u-icon name="map" color="#999999 " size="36"></u-icon>
									<text class="text">距您{{orderInfo.shipping.juli}}</text>
								</view>
								<view class="contact">
									<image src="@/static/images/icon_7.png" mode="widthFix" class="icon"></image>
									<text class="text">{{agentInfo.tel}}</text>
									<image src="@/static/images/icon_6.png" mode="widthFix" class="phone"
										@click="callPhone(agentInfo.tel)"></image>
								</view>
							</view>

						</view>
					</view>
					<view class="row-between mt10">
						<text>计费方式</text>
						<text>
							{{orderInfo.billing_method}}
						</text>
					</view>
					<view class="row-between mt10">
						<text>核销方式</text>
						<text @tap="openSelect('write_off')">
							{{curr_write_off.msg}}
						</text>
					</view>
					<view class="row-between mt10" style="color: #FF2C3C;font-size: 36rpx;">
						<text>应付金额</text>
						<text>{{orderAmout}}</text>
					</view>
				</view>

				<!-- 优惠券 -->
				<view v-if="couponList&&couponList.length>0" class="contain" style="padding: 20rpx;"
					@tap="couponSelectShow=true">
					<view class="row-between">
						<view>
							优惠券
						</view>
						<view>
							<text style="color: #FF2C3C;">-￥{{currCoupon?currCoupon.amount:0}}</text>
							<u-icon name="arrow-right" color="#666"></u-icon>
						</view>
					</view>
				</view>

				<!-- 支付方式 -->
				<view class="pay-way contain">
					<view class="lighter title">支付方式</view>

					<radio-group class="radio-group" @change="radioChange">
						<label v-for="(item, index) in payWayArr" :key="index" class="item row-between">
							<view class="row">
								<image class="icon-lg mr20" :src="item.icon" />
								<view class>
									<view class="balck bt10">{{item.name}}</view>
									<view class="muted xs">{{item.extra}}</view>
								</view>
							</view>
							<radio class="radio" :value="String(item.pay_way)" :checked="item.pay_way == payWay" />
						</label>

					
					</radio-group>
					<!-- <view class="" style="margin-top: 10rpx;padding: 20rpx 24rpx;color: #FF2C3C;">
						信用分可抵押金
					</view> -->
				</view>

				<view class="contain" style="display: none;">
					<view class="row-between" style="padding: 30rpx;">
						<view class="title">合同协议</view>
						<button style="padding: 0 30rpx;" class="btn br60 white" size="md" hover-class="none"
							@tap="qianming">
							{{signimg ? '修改签名' : '提交签名'}}
						</button>
					</view>
					<!-- <image v-if="signimg" :src="signimg" style="width: 200rpx;height: 100%;" mode="widthFix"></image> -->

				</view>

			</view>

			<!-- 订单结算 -->
			<view class="footer bg-white fixed">
				<u-checkbox-group>
					<u-checkbox v-model="isAgreeProtocol" shape="circle">
						<view class="sm row">
							<view class="lighter">已阅读并同意协议</view>
							<view class="primary" @tap.stop="showLeaseProtocol = true">《租赁协议》</view>
						</view>
					</u-checkbox>
				</u-checkbox-group>
				<view class="row-between">
					<view class="all-price lg row">
						<text>合计：</text>
						<view class="ornament">
							<price
								:content="currCoupon&&orderInfo.type_status==2? orderAmout-Number(this.currCoupon.amount):orderAmout"
								mainSize="38rpx" minorSize="30rpx" :isSuffix="false" :isPrefix="true" />
						</view>
					</view>
					<button class="btn br60 white" size="md" hover-class="none" @tap="onSubmitOrder">
						提交订单
					</button>
				</view>
			</view>
		</view>

		<loading-view v-if="showLoading" background-color="white" :size="50" />


		<!-- 租赁用户协议 -->
		<u-popup v-model="showLeaseProtocol" mode="center" border-radius="20">
			<view class="protocol">
				<view class="protocol-title">租赁用户协议</view>
				<scroll-view scroll-y="true" class="protocol-content">
					<u-parse :html="protocolHtml" />
				</scroll-view>
				<view class="protocol-confirm" @tap="showLeaseProtocol = false">我知道了</view>
			</view>
		</u-popup>

		<!-- 支付密码 -->
		<set-pay-pwd ref="setPayPwd" @confirm="orderBuyFun" />

		<!-- 计费方式选择 -->
		<u-select v-if="isSelectShow" v-model="isSelectShow" :list="selectList" :safeAreaInsetBottom="true"
			valueName="id" :labelName="selectLabelName" @confirm="selectConfirm"></u-select>

		<u-modal v-model="isShowShppingWarn" title="配送提醒" confirm-text="确认并继续" cancel-text="切换上门自提"
			:show-cancel-button="true" @cancel="curr_shipping_type=shippint_type.findIndex(v=>v.id==2)">
			<view class="mt30" style="padding: 0 20rpx;">
				<view class="row-center mb30" style="text-align: center;">
					{{logisticsText}}
				</view>
				<u-line color="#ddd" />
				<view class="row-between mt30 lighter sm">
					<view>
						配送距离
					</view>
					<view>
						{{orderInfo.shipping.juli}}
					</view>
				</view>
				<view class="row-between mt30 mb30 sm" style="color: #FF2C3C;">
					<view>
						配送费
					</view>
					<view>
						+ ￥{{orderInfo.shipping_price}}
					</view>
				</view>
				<u-line color="#ddd" />
			</view>
		</u-modal>

		<coupon-popup v-model="couponSelectShow" @confirm="e=>currCoupon=e" :current="currCoupon"
			:can-use-coupon-list="couponList"></coupon-popup>
	</view>
</template>

<script>
	import {
		prepay,
		getMnpNotice,
		getAlipayPayStatus
	} from '@/api/app';
	import {
		mapGetters
	} from 'vuex'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'

	import {
		payment,
		leaseBuy,
		getLeaseProtocol
	} from '@/api/lease.js'

	import {
		getOrderCoupon
	} from '@/api/order';

	export default {
		data() {
			return {
				signimg: "1",
				showLoading: true,
				address: {}, // 当前地址信息
				orderInfo: {}, // 订单信息
				goods: {}, // 商品数据
				addressId: '', // 所选地址ID
				userRemark: '', // 留言

				popActive: 0, // 优惠券Tabs当前索引

				payWayArr: [], // 支付方式列表
				payWay: '', // 所选的支付方式

				payload: null, // 已选规格
				isAgreeProtocol: false, // 协议是否同意
				showLeaseProtocol: false, // 协议 Popup
				protocolHtml: '', // 富文本协议内容

				isSelectShow: false, //选择框显示
				selectList: null, //选择框列表
				selectType: null, //选择框类型
				selectLabelName: null, //选择框label名

				shippint_type: null,
				curr_shipping_type: null, //当前快递方式
				curr_write_off: null, //当前核销方式
				location: {},
				isShowShppingWarn: false,
				logisticsText: '配送费标准：1000米（含）/{money}元，不计重量和体积，只计算距离；', //物流文本

				couponList: [],
				couponSelectShow: false, //优惠券选择列表
				currCoupon: null, //当前优惠券
			};
		},

		computed: {
			curr_shipping_type_id() {
				if (this.curr_shipping_type === null) return 0;
				const val = this.shippint_type[this.curr_shipping_type];
				if (val && val.id) {
					if (val.id == 3) this.isShowShppingWarn = true;
					return val.id
				} else return 0
			},
			orderAmout() {
				if (!this.orderInfo) return 0;
				let temp = this.orderInfo.order_amount
				if (this.curr_shipping_type_id == 3) {
					temp = this.orderInfo.order_amount + this.orderInfo.shipping_price
				}
				return temp;
			},
			// 每天多少钱
			oneDayPrice() {
				return this.goods.lease_price;
				/*****
				const unit = this.goods.periods_attribute;
				const issueRent = this.goods.issue_rent;
				switch (unit) {
					case 'is_week':
						return Number((issueRent / 7).toString().match(/^\d+(?:\.\d{0,2})?/));
					case 'is_month':
						return Number((issueRent / 30).toString().match(/^\d+(?:\.\d{0,2})?/));
				}
				****/
			},
			...mapGetters(['agentInfo']),
		},

		methods: {
			selectConfirm(e) {
				let temp = null,
					nameProp = null;
				if (this.selectType == 'write_off') {
					nameProp = 'msg'
				}
				temp = e.map(v => ({
					[nameProp]: v.label,
					id: v.value
				}))
				this['curr_' + this.selectType] = temp[0];
			},
			/**
			 * 打开选择框
			 * @param {Object} type 列表字段
			 */
			openSelect(type) {
				this.selectType = type;
				this.selectList = this.orderInfo[type];
				if (this.selectType == 'write_off') {
					this.selectLabelName = 'msg';
				}
				this.isSelectShow = true;
			},
			/**
			 * 拨打电话
			 * @param tel 电话
			 */
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			/** 
			 * 打开地图
			 * @param {*} lat 经度
			 * @param {*} lon 纬度
			 */
			openMap(lat, lon) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					fail(e) {
						console.log('调用地图失败:', e)
					}
				})
			},

			// 输出分期单位 -- 弃用
			getPeriodsUnit(value) {
				switch (value?.type) {
					case 'is_day':
						return '天';
					case 'is_week':
						return '周';
					case 'is_month':
						return '个月';
					default:
						return '加载错误'
				}
			},

			// 选择支付方式
			radioChange(e) {
				const value = e.detail.value;
				this.payWay = value * 1;
				
				// if(this.payWay == 10) {
				// 	this.orderAmout =
				// }
			},

			// 微信
			getAuthMsg() {
				return new Promise(resolve => {
					getMnpNotice({
						scene: 1
					}).then(res => {
						if (res.code == 1) {
							const data = res.data;
							uni.requestSubscribeMessage({
								tmplIds: data
							});
						}
						resolve();
					});
				});
			},

			// 点击下单
			onSubmitOrder() {
				if (!this.isAgreeProtocol)
					return uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					});
				if ((!this.addressId) && this.curr_shipping_type_id != 2)
					return uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});

				uni.showModal({
					title: '温馨提示',
					content: '是否确认下单?',
					confirmColor: '#FF2C3C',
					success: async res => {
						if (!res.confirm) return;

						// #ifdef MP-WEIXIN
						await this.getAuthMsg();
						// #endif

						if (this.payWay == 3) {
							this.$refs.setPayPwd.hasPayWord().then(res => {
								this.$refs.setPayPwd.showInputPwd();
							});
						} else {
							this.orderBuyFun();
						}
					}
				});
			},

			// 下单处理
			orderBuyFun(password) {
				this.showLoading = true;
				if (!this.payWayArr.length) {
					this.showLoading = false;
					return this.$toast({
						title: '请联系管理员配置支付方式'
					});
				}

				const address = this.address;
				const goods = this.goods;

				const submitObj = {
					action: 'submit',
					type: 'buy_now',
					goods: [{
						lease_goods_id: goods.id,
						item_id: goods.item_id,
						goods_num: goods.goods_num,
						periods_id: goods.periods_id,
						remark: this.userRemark,
						Identifier: this.payload.goods[0].Identifier
					}],
					// insurance: goods.insurance,
					pay_way: this.payWay,
					address_id: this.curr_shipping_type_id != 2 ? this.addressId : -1,
					address: this.curr_shipping_type_id != 2 ? this.address : {},
					pay_password: password,
					agent_id: this.agentInfo.id,
					write_off: this.curr_write_off.id,
					shipping_type: this.curr_shipping_type_id,
					lat: this.location.lat,
					lng: this.location.lng,
					coupons_id: this.currCoupon ? this.currCoupon.id : 0,
					sign_img: this.signimg
				};

				leaseBuy(submitObj).then(res => {
					this.showLoading = false;
					const data = res.data;
					const code = res.code;
					if (code != 1) {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
						return;
					}
					const order_id = data.order_id;
					console.log('res>>', res)
					const type = data.from;
					console.log('type>>', type)
					console.log('payWay>>', this.payWay)
					if(this.payWay == 10) {
						uni.redirectTo({
							url: '/pages/pay' +
								'?id=' + order_id
						});
					}else {
						prepay({
							from: type,
							order_id: order_id,
							// #ifdef MP-WEIXIN
							order_source: 1,
							// #endif
						}).then(({
							code,
							data
						}) => {
							switch (code) {
								// 微信支付
								case 1:
									this.payWeChat(data, order_id);
									break;
									// 支付宝支付
								case 20001:
									this.payAliPay(data, order_id);
									break;
									// 余额支付
								case 10001:
									uni.redirectTo({
										url: '/bundle/pages/lease_pay_result/lease_pay_result' +
											'?id=' + order_id
									});
									break;
										// 信用分支付
									case 10002:
										uni.redirectTo({
											url: '/pages/pay' +
												'?id=' + order_id
										});	
										break;
							}
						}).catch(err => {
							this.$toast({
								title: '支付失败，请重试'
							});
							console.log(err);
						});
					}
					
				});
			},

			// 微信支付
			payWeChat(data, orderID) {
				wxpay(data).then(res => {
					if (res == 'success') {
						uni.redirectTo({
							url: '/bundle/pages/lease_pay_result/lease_pay_result' +
								'?id=' + orderID
						});
					} else {
						return;
						uni.redirectTo({
							url: '/bundle/pages/lease_order_detail/lease_order_detail' +
								'?id=' + orderID
						});
					}
				})
			},

			// 支付宝支付
			payAliPay(data, orderID) {

				// #ifdef H5
				alipay(data);
				// #endif

				// #ifdef MP-ALIPAY
				const tradeNo = data?.data?.trade_no;
				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: tradeNo,
					success: (res) => {
						getAlipayPayStatus({
							trade_no: tradeNo
						}).then(res => {
							if (res.tradeStatus == 'TRADE_SUCCESS') {
								uni.redirectTo({
									url: '/bundle/pages/lease_pay_result/lease_pay_result' +
										'?id=' + orderID
								});
							} else {
								uni.redirectTo({
									url: '/bundle/pages/lease_order_detail/lease_order_detail' +
										'?id=' + orderID
								});
							}
						});
					},
					fail: (res) => {
						uni.redirectTo({
							url: '/bundle/pages/lease_order_detail/lease_order_detail' +
								'?id=' + orderID
						});
					}
				});
				// #endif
			}
		},


		onLoad(options) {
			const data = JSON.parse(decodeURIComponent(options.data));
			this.payload = data;

			// 选择地址
			uni.$on("selectaddress", e => {
				const id = e.id;
				const address = e.address;

				this.addressId = e.id
				this.address = address;
			});
			uni.$on("selectsign", e => {
				this.signimg = e.signimg
			});
			// 获取付款方式
			// payment().then(res => {
			// 	if (res.code != 1) return;
			// 	const data = res.data;
			// 	this.payWayArr = data;
			// 	this.payWay = data.length ? data[0].pay_way : 0
			// });

			// 获取协议内容
			getLeaseProtocol().then(res => {
				console.log('协议内容>>', res);
				if (res.code != 1) return;
				this.protocolHtml = res.data || '';
			});
		},

		onShow() {
			const data = this.payload;

			let _this = this;
			uni.getStorage({
				key: "City_lat",
				success: function(res) {
					_this.location.lat = res.data
					uni.getStorage({
						key: "City_lng",
						success: function(res) {
							_this.location.lng = res.data
							leaseBuy({
								...data,
								lat: _this.location.lat,
								lng: _this.location.lng,
								address_id: _this.addressId,
								agent_id: _this.agentInfo?.id,
								action: 'info',
								type: 'buy_now'
							}).then(res => {
								if (res.code != 1) return;
								_this.showLoading = false;
								const data = res.data;
								_this.orderInfo = data;
								_this.address = data.address;
								_this.addressId = data?.address?.id || '';
								_this.goods = data.goods_lists[0];
								_this.curr_write_off = data.write_off[0]
								_this.shippint_type = data.shipping_type;
								_this.payWayArr = data.payment;
								_this.couponList = data.coupon_list
								_this.logisticsText = _this.logisticsText.replace(
									'{money}', data.shipping.money)
								_this.payWay = data.payment.length ? data.payment[0]
									.pay_way : 0
								_this.curr_shipping_type = _this.agentInfo.leixin == 3 ?
									0 :
									data.shipping_type.findIndex(
										v => v.id == 2);
							});
						}
					})
				}
			})

		},

		onUnload() {
			uni.$off("selectaddress");
		},

	}
</script>
<style lang="scss">
	.contain {
		background-color: white;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}

	.confirm-order .confirm-con {
		overflow: hidden;
		padding: 0 20rpx calc(126rpx + 20rpx + env(safe-area-inset-bottom));
	}

	.confirm-order .contain {
		margin-top: 20rpx;
		background-color: white;
		border-radius: 24rpx;
	}

	.confirm-order .img-line {
		height: 1.5px;
		width: 100%;
		display: block;
	}


	.confirm-order .coupons {
		height: 100rpx;
		padding: 0 24rpx;
	}

	.goods .title {
		padding: 22rpx 24rpx;
		border-bottom: 1px solid #F6F6F6;
	}

	.goods .all-num {
		padding: 22rpx 24rpx;
		border-bottom: 1px dotted #F6F6F6;
	}

	.lease-goods {
		padding: 24rpx 20rpx;
	}

	.confirm-order .footer {
		box-sizing: content-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 126rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}


	.confirm-order .pay-way .title {
		padding: 20rpx 24rpx;
	}

	.confirm-order .pay-way .radio-group .item {
		height: 120rpx;
		padding: 0 24rpx;
	}

	.confirm-order .price {
		padding: 28rpx 20rpx;
	}

	.confirm-order .price .item:not(:last-of-type) {
		margin-bottom: 20rpx;
	}

	.confirm-order .goods>.item,
	.confirm-order .benefit>.item {
		padding: 0 24rpx;
		height: 80rpx;
	}

	.confirm-order .btn {
		background-color: #24A3FF;
		padding: 0 50rpx;
	}

	.confirm-order .van-cell:after {
		border: none;
	}

	.goods .shop-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.pop-title {
		height: 100rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.pop-title .title {
		margin-left: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 36rpx;
	}

	.periods-price {
		padding: 0 20rpx;
	}

	.periods-price-item {
		padding: 20rpx 0;
	}

	.periods-price-item:nth-child(n + 2) {
		border-top: 1px solid #E5E5E5;
	}

	.periods-price-title {
		padding: 10rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.periods-price-row {
		padding: 10rpx 0;
		font-size: 26rpx;
	}


	.protocol {
		display: flex;
		flex-direction: column;
		width: 88vw;
		height: 88vh;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.protocol-title {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #333333;
	}

	.protocol-content {
		flex: 1;
		overflow: scroll;
	}

	.protocol-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72rpx;
		border-radius: 50px;
		margin-top: 20rpx;
		font-size: 32rpx;
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.send-store {
		padding: 32rpx 20rpx;

		.top-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #373737;
				line-height: 32rpx;
			}
		}

		.store-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #eee;

				.img {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.info-box {
				height: 160rpx;
				padding: 20rpx 0;
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.address {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 32rpx;
				}

				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.distance {
						display: flex;
						align-items: center;

						.text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #1E8AF4;
							line-height: 24rpx;
							margin-left: 10rpx;
						}
					}

					.contact {
						display: flex;
						align-items: center;

						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}

						.text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 24rpx;
						}

						.phone {
							width: 36rpx;
							height: 36rpx;
							margin-left: 16rpx;
						}
					}
				}

			}
		}
	}
</style>